<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<style>
    .boxdraw {
        background: rgba(56, 135, 190, 0.1);
        border: 2px solid #3887be;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }
</style>

<div id='map'></div>

<script>
    var resources = [{
        "id": 7,
        "code": "parking001",
        "name": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": "116.391907",
        "latitude": "39.914951",
        "longitude_gis": "119.275128",
        "latitude_gis": "34.642646",
        "introduction": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "remark": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "path": null,
        "camera_url": "",
        "port": null,
        "ip": "",
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u0022f919d191ae17dbf484cc66df2d0bb845\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.27508284426733,34.64404626915126],[119.27711969240471,34.64314782838164],[119.27505684202134,34.64103003662652],[119.2731586729883,34.64202832903794],[119.27508284426733,34.64404626915126]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "60753.87",
            "park_number": "500",
            "park_type": "2",
            "park_price": "15.00"
        },
        "created_id": 1,
        "updated_id": 1,
        "created_at": "2018-10-24 09:35:27",
        "updated_at": "2018-11-29 14:57:07",
        "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28147241551488,34.64496765639947],[119.28193844438078,34.64496018761034],[119.28190364351588,34.644522017818886],[119.28137557828717,34.644541934675686],[119.28147241551488,34.64496765639947]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
        "area": "100391.47"
    }, {
        "id": 162,
        "code": "parking002",
        "name": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": "116.391907",
        "latitude": "39.914951",
        "longitude_gis": "119.283155",
        "latitude_gis": "34.641892",
        "introduction": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "remark": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "path": null,
        "camera_url": "",
        "port": null,
        "ip": "",
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28285798129582,34.642205848878575],[119.28360611214049,34.64212828833401],[119.28342542380085,34.64163632573964],[119.28278860768813,34.641704812288765],[119.28285798129582,34.642205848878575]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "3598.32",
            "park_number": "11122",
            "park_type": "1",
            "park_price": "2115.00"
        },
        "created_id": 1,
        "updated_id": 1,
        "created_at": "2018-11-29 13:03:15",
        "updated_at": "2018-11-29 15:00:08",
        "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28321376173818,34.64341624016444],[119.28382686317775,34.64334997679842],[119.28375374062318,34.64292203189153],[119.28311692451047,34.642990518440655],[119.28321376173818,34.64341624016444]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
        "area": "2777.93"
    }, {
        "id": 163,
        "code": "parking003",
        "name": "\u7334\u738b\u505c\u8f66\u573a",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": null,
        "latitude": null,
        "longitude_gis": "119.283312",
        "latitude_gis": "34.637549",
        "introduction": "\u7334\u738b\u505c\u8f66\u573a",
        "remark": "\u7334\u738b\u505c\u8f66\u573a",
        "path": null,
        "camera_url": null,
        "port": null,
        "ip": null,
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u00221ba57067c05ea00537479a2f8e23738b\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28354473479345,34.63845031357053],[119.28513983759296,34.637870733393896],[119.28384460895109,34.63629926880567],[119.28147758877788,34.63688267277199],[119.28205873077934,34.63826137864338],[119.28354473479345,34.63845031357053]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "51554.32",
            "park_number": "10000",
            "park_type": "1",
            "park_price": "125.00"
        },
    }];
    var map_info = {
        "url": "http:\/\/192.168.1.3:8888\/geoserver\/hgs\/wms",
        "longitude": "119.27382231",
        "latitude": "34.64245889",
        "zoom": "14",
        "maxzoom": "22",
        "layer": "hgs:hgs",
    };
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
    var map = new mapboxgl.Map({
        container: 'map',
        center: [map_info.longitude, map_info.latitude],
        zoom: map_info.zoom,
        style: {
            "version": 8,
            "sources": {},
            "layers": [{
                'id': 'background',
                'type': 'background',
                'paint': {
                    'background-color': 'rgba(0,0,0,0)'
                },
                'interactive': true
            }],
            "_ssl": true
        },
        minZoom: 2,
    });

    var popup = new mapboxgl.Popup({
        closeButton: false
    });
    map.boxZoom.disable();
    map.on('load', function () {
        var canvas = map.getCanvasContainer();
        var start;
        var current;
        var box;
        map.addLayer({
            'id': 'wms-layer',
            'type': 'raster',
            'source': {
                'type': 'raster',
                'tiles': [
                    map_info.url + '?' +
                    'bbox={bbox-epsg-3857}&' +
                    'format=image/png&' +
                    'service=WMS&' +
                    'version=1.1.1&' +
                    'request=GetMap&' +
                    'srs=EPSG:3857&' +
                    'width=256&' +
                    'height=256&' +
                    'layers=' + map_info.layer
                ],
                'tileSize': 256
            }
        });
        resources.forEach(function (resource, i) {
            if (resource.extra.geojson) {
                map.addSource("national-park" + i, {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": JSON.parse(resource.extra.geojson)
                    }
                });
                map.addLayer({
                    "id": "park-boundary" + i,
                    "type": "fill",
                    "source": "national-park" + i,
                    "paint": {
                        'fill-color': '#088',
                        'fill-opacity': 0.8
                    },
                    "filter": ["==", "$type", "Polygon"]
                });
                map.addLayer({
                    "id": "select-park-boundary" + i,
                    "type": "fill",
                    "source": "national-park" + i,
                    "paint": {
                        'fill-color': '#c7084a',
                        'fill-opacity': 0.8
                    },
                    "filter": ["==", "", ""],
                    "properties":{
                        'name':resource.name
                    }
                });
            }
        });
        canvas.addEventListener('mousedown', mouseDown, true);
        function mousePos(e) {
            var rect = canvas.getBoundingClientRect();
            return new mapboxgl.Point(
                e.clientX - rect.left - canvas.clientLeft,
                e.clientY - rect.top - canvas.clientTop
            );
        }

        function mouseDown(e) {
            if (!(e.shiftKey && e.button === 0)) return;
            map.dragPan.disable();
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
            document.addEventListener('keydown', onKeyDown);
            start = mousePos(e);
        }

        function onMouseMove(e) {
            current = mousePos(e);
            if (!box) {
                box = document.createElement('div');
                box.classList.add('boxdraw');
                canvas.appendChild(box);
            }

            var minX = Math.min(start.x, current.x),
                maxX = Math.max(start.x, current.x),
                minY = Math.min(start.y, current.y),
                maxY = Math.max(start.y, current.y);

            var pos = 'translate(' + minX + 'px,' + minY + 'px)';
            box.style.transform = pos;
            box.style.WebkitTransform = pos;
            box.style.width = maxX - minX + 'px';
            box.style.height = maxY - minY + 'px';
        }

        function onMouseUp(e) {
            // Capture xy coordinates
            finish([start, mousePos(e)]);
        }

        function onKeyDown(e) {
            // If the ESC key is pressed
            if (e.keyCode === 27) finish();
        }

        function finish(bbox) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('keydown', onKeyDown);
            document.removeEventListener('mouseup', onMouseUp);

            if (box) {
                box.parentNode.removeChild(box);
                box = null;
            }

            if (bbox) {
                var features = map.queryRenderedFeatures(bbox, {
                    layers: resources.map(function (resource, item) {
                        return 'park-boundary' + item
                    })
                });
                features.forEach(function (feature, item) {
                    map.setFilter('select-' + feature.layer.id, ["==", "$type", "Polygon"]);
                })
            }

                map.dragPan.enable();
        }

        map.on('mousemove', function (e) {
            var features = map.queryRenderedFeatures(e.point, {
                layers: resources.map(function (resource, item) {
                    return 'select-park-boundary' + item
                })
            });
            // Change the cursor style as a UI indicator.
            map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
            if (!features.length) {
                popup.remove();
                return;
            }

            features.forEach(function (feature, item) {
                console.log(feature)
                popup.setLngLat(e.lngLat)
                    .setText(feature.source)
                    .addTo(map);
            })

        });
    });
</script>

</body>
</html>